<template>
  <tr>
    <td>
      <input type="checkbox" v-model="tchecked" />
    </td>
    <td>{{ name }}</td>
    <td>{{ price }}</td>
    <td>
      <button type="button" @click="red">-</button>
      {{ num }}
      <button @click="add">+</button>
    </td>
    <td>{{ price * num }}</td>
    <td><button type="button" @click="del">删除</button></td>
  </tr>
</template>

<script>
export default {
  props: ['name', 'price', 'num', 'index', 'checked'],
  data() {
    return {
      tchecked: this.checked,
    }
  },
  methods: {
    del() {
      this.$emit('delFn', this.index)
    },
    red() {
      this.$emit('redFn', this.index)
    },
    add() {
      this.$emit('addFn', this.index)
    }
  },
  watch: {
    tchecked: {
      deep: true,
      immediate: true,
      handler() {
        this.$emit('changecheck', this.tchecked, this.index)
      },
    },
    //
    checked: {
      deep: true,
      immediate: true,
      handler() {
        this.tchecked = this.checked;
      },
    },
  },
}
</script>

<style></style>
